import { YScrollableContainer, PagingMessage } from './../../../components/scrollable/y-scrollable-container';
import { Employee } from './../../../models/Employee';
import { Component, Input, Output, EventEmitter, ViewChild, AfterViewInit } from '@angular/core';
import { BaseComponent } from "../../../components/baseComponent";

@Component({
    selector: 'bracelet-setup',
    template: `
        <div class="bracelet-setup-container noshrink pct100" fxLayout="column" fxFlex="100%">
            <div fxLayout="column" class="title padding pct100 noshrink">
                <span>手环设置</span>
                <span class="text-s color-gray margin-t-m">传菜员手环的绑定设置</span>
            </div>
            <div fxLayout="column" class="bracelet-detail-container">
                <div class="padding bracelet-title noshrink" fxLayout="row">
                    <div fxLayout="row" fxFlex="90%">
                        <span fxFlex="25%" fxLayoutAlign="start center">员工姓名</span>
                        <span fxFlex="25%" fxLayoutAlign="end center">员工号</span>
                        <span fxFlex="20%" fxLayoutAlign="center center">员工角色</span>
                        <span fxFlex="20%" fxLayoutAlign="center center">是否绑定手环</span>
                        <span fxFlex="10%"></span>
                    </div>
                    <div fxFlex="10%"></div>
                </div>
                <div fxLayout="row" class="noshrink bracelet-content">
                    <div fxLayout="column" fxFlex="90%" class="h100">
                        <y-scrollable-container  (change)="pagingMeaageChange($event)">
                            <div class="padding bracelet-item" (click)="select.emit(employee)" item *ngFor="let employee of employees;trackBy:trackBy">
                                <span fxFlex="25%" fxLayoutAlign="start center">{{employee.user.name}}</span>
                                <span fxFlex="25%" fxLayoutAlign="end center">{{employee.employeeNumber}}</span>
                                <span fxFlex="20%" fxLayoutAlign="center center">传菜员</span>
                                <span fxFlex="20%" fxLayoutAlign="center center"><i class="material-icons color-primary" *ngIf="employee.extended&&employee.extended.braceletNo">done</i></span>
                                <span fxFlex="10%" fxLayoutAlign="end center"><i class="material-icons">chevron_right</i></span>   
                            </div>
                        </y-scrollable-container>
                    </div>
                    <div fxFlex="10%" fxLayout="column" fxLayoutAlign="space-between">
                        <span fxLayoutAlign="center" (click)="pagingInfo.turningPage(-1)"><i class="material-icons text-large" *ngIf="previousCount">expand_less</i></span>
                        <span fxLayoutAlign="center" (click)="pagingInfo.turningPage(1)"><i class="material-icons text-large" *ngIf="nextCount">expand_more</i></span>
                    </div>
                </div>
            </div>
        </div>
    `,
    styleUrls: ['./bracelet.scss']
})
export class BraceletSetupComponent extends BaseComponent implements AfterViewInit {
    @Input() employees: Employee[];
    @Output() select = new EventEmitter<Employee>();

    @ViewChild(YScrollableContainer)
    private yScrollableContainer: YScrollableContainer;
    private nextCount;
    private previousCount;
    ngAfterViewInit() {
        setTimeout(()=>{
            this.yScrollableContainer.childrenChanged();
        },500)
    }
    pagingInfo: PagingMessage
    pagingMeaageChange(event) {
        console.log("2222", event)
        this.pagingInfo = event;
        this.nextCount = this.pagingInfo.nextCount;
        this.previousCount = this.pagingInfo.previousCount;
    }
}
